import React, { Component } from 'react'
import { Button, Card, Icon, List, message } from 'antd'
import { connect } from 'react-redux'
import { reqProdById, reqCategoryList } from '../../api/index'
import './css/detail.less'
const { Item } = List
@connect(
  state => ({
    productList: state.productList,
    categoryList: state.categoryList
  })
)
class Detail extends Component {

  state = {
    categoryId: '',
    categoryName: '',
    desc: '',
    detail: '',
    imgs: [],
    name: '',
    price: '',
    isLoading:true
  }
  componentDidMount() {

    let reduxPrdList = this.props.productList
    let reduxCategoryList = this.props.categoryList

    const { id } = this.props.match.params
    if (reduxPrdList.length) {
      let result = reduxPrdList.find((item) => {
        return item._id === id
      })
      if (result) {
        this.categoryId = result.categoryId
        this.setState({ ...result })
      }
    } else {
      //通过id请求商品信息
      this.getProdById(id)
    }
    if (reduxCategoryList.length) {
      let result = reduxCategoryList.find((item) => {
        return item._id === this.categoryId
      })
      this.setState({ categoryName: result.name,isLoading:false})
    } else {
      this.getCategoryList()
    }
  }

  getProdById = async (id) => {
    let result = await reqProdById(id)
    const { status, data, msg } = result

    if (0 === status) {
      this.categoryId = data.categoryId
      this.setState({ ...data })
    } else {
      message.error(msg)
    }
  }

  getCategoryList = async () => {
    let result = await reqCategoryList()
    const { status, data, msg } = result

    if (0 === status) {
      let result = data.find((item) => {
       return item._id === this.categoryId
      })
      this.setState({categoryName:result.name,isLoading:false})
    } else {
      message.error(msg)
    }
  }

  render() {
    return (
      <Card title={
        <div className='left-top'>
          <Button type="link" size="small" onClick={() => { this.props.history.goBack() }}>
            <Icon type="arrow-left" style={{ fontSize: '20px' }} />
          </Button>
          <span>商品详情</span>
        </div>
      }
      >
        <List 
        loading={this.state.isLoading}
        >
          <Item>
            <div>
              <span className="prod-name">商品名称：</span>
              <span>{this.state.name}</span>
            </div>
          </Item>
          <Item>
            <div>
              <span className="prod-name">商品描述：</span>
              <span>{this.state.desc}</span>
            </div>
          </Item>
          <Item>
            <div>
              <span className="prod-name">商品价格：</span>
              <span>{this.state.price}</span>
            </div>
          </Item>
          <Item>
            <div>
              <span className="prod-name">所属分类：</span>
              <span>{this.state.categoryName}</span>
            </div>
          </Item>
          <Item>
            <div>
              <span className="prod-name">商品图片：</span>
              {
                this.state.imgs.map((item, index) => {
                  return <img key={index} src={`/upload/` + item} alt='商品图片' />
                })
              }
            </div>
          </Item>
          <Item>
            <div>
              <span className="prod-name">商品详情：</span>
              <span dangerouslySetInnerHTML={{ __html: this.state.detail }}></span>
            </div>
          </Item>
        </List>
      </Card>
    )
  }
}
export default Detail